<template>
  <div style="padding: 20px;">
    <Vue3CronPlus ref="vue3CronPlusRef" />
    <el-input v-model="form.corn" style="margin-bottom: 10px">
      <template #append>
        <el-button @click="getCorn">生成</el-button>
      </template>
    </el-input>
    <el-input v-model="form.cornParsing" style="margin-bottom: 10px">
      <template #append>
        <el-button @click="parsing">解析</el-button>
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import Vue3CronPlus from "@/components/vue3-cron/index.vue";
import { ref } from "vue";
const vue3CronPlusRef = ref();
const form = ref({
  corn: "",
  // cornParsing: "3/5 * 3/5 * * ? 2018-2018",
  // cornParsing: "0 0/5 * * * ?",
  // cornParsing: "0 0 12 15W * ?",
  cornParsing: "* * 10 14 * 3#2",
});
const getCorn = () => {
  form.value.corn = vue3CronPlusRef.value.getValue();
};
const parsing = () => {
  vue3CronPlusRef.value.setValue(form.value.cornParsing);
};
</script>

<style lang="scss" scoped></style>